<template>
	<view>
	   <view class="ImproveMessage">
		   <view>姓名</view>
		   <view>
			   <input type="text" placeholder="填写真实姓名" placeholder-class="placeholder" v-model="name"></input>
		   </view>
	   </view>
	   <view class="ImproveMessage"  @click="showSinglePicker">
	   		<view>证件</view>
	   		<view v-if="showPaperwork">
	   			<text>请选择</text>
	   			<image src="../../../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
	   		</view>
			<view v-if="!showPaperwork">{{paperworkText}}</view>
	   </view>
	   <view class="ImproveMessage">
	   		<view>证件号码</view>
	   		<view>
	   			<input type="text" placeholder="填写证件号码" placeholder-class="placeholder" v-model="IDNumber"></input>
	   		</view>
	   </view>
	   <view class="ImproveMessage">
	   		<view>公司名称</view>
	   		<view>
	   			<input type="text" placeholder="填写公司名称" placeholder-class="placeholder" v-model="companyName"></input>
	   		</view>
	   </view>
	  <view class="loadImg">
		   <text>上传营业执照</text>
		   <view style="display: flex;justify-content: flex-start;flex-wrap: wrap;width:100%;">
			   <view class="loadImg_button" @click="loadImg()">
			   		<view>
			   			<image src="../../../../static/images/load_icon_03.png"></image>
			   			<text>上传</text>
			   		</view>
			   </view>
			   <view style="width:192upx;height: 272upx;margin-left:50upx;position: relative;" v-for="(item,index) in showImgSrc" :key="index">
			   		<image :src="item" style="width:192upx;height: 272upx;" @click="previewImage(index)"></image>
					<image src="../../../../static/images/popup_03.png" class="deleteImg" @click="deleteImg(index)"></image>
			   </view>
		   </view>
	   </view>
	   <view class="confirm_button">
			<button @click="confirm">确认</button>
	   </view>
	   <!-- 广告 -->
	   <view class="AD">
	   	<text>技术支持：</text>
	   	<image src="../../../../static/images/log_03.png" style="width:30upx;height:24upx"></image>
	   	<text>掌邦科技</text>
	   </view>
	   <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
	    @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '../../../../components/mpvue-picker/mpvuePicker.vue';
	import { uploadFile } from '../../../../common/alioss.js'
	export default {
		components: {
		  mpvuePicker,
        },
		data() {
			return {
				pickerSingleArray: [{
						label: '身份证',
						value: 1
					},
				],
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#f2526f',
				paperworkText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				showPaperwork:true,
				imgSrc:[],
				showImgSrc:[],
				name:"",
				IDNumber:"",
				companyName:"",
				countImg:0
			}
		},
		methods: {
		  //选择图片
		  loadImg(){
			var that=this;
			if(that.countImg<1){
				uni.chooseImage({
				  count: 1,
				  sourceType: ['album'],
				  success: function (res) {
				   //数据加载提示框
				   uni.showLoading({
				   	title: '上传图片中',
				   	mask: true
				   });
				   console.log(res.tempFilePaths[0]);
				   that.imgSrc=[];
				   that.imgSrc.push(res.tempFilePaths[0]);
				   console.log(that.imgSrc[0]);
				   if(that.imgSrc.length!=0){
				   	  uploadFile(that.imgSrc[0]).then(res => {
				   		that.showImgSrc.push(res.data.url)
						that.countImg++;
						uni.hideLoading();
						console.log(res.data.url);
				   	}); 
				   }
				  },
				})
			}else{
				uni.showToast({
					title:"最多上传一张图片",
					icon:"none"
				})
			}
		  },
		  //删除图片
		  deleteImg(index){
			  this.showImgSrc.splice(index,1);
			  this.countImg=0;
			  console.log(this.showImgSrc);
		  },
		  //预览图片
		  previewImage(index){
			  var imgUrls=[this.imgSrc[index]]
			  uni.previewImage({
                urls: imgUrls=[this.imgSrc[index]]
              });
		  },
		  //确定按钮
         confirm(){
			 let that=this;
			 var newImgSrc;
			 newImgSrc=that.showImgSrc.join("---")
			 uni.request({
			 	url:this.$store.state.URL+"/merchant/merchant_audit_data/add_perfect",
				data:{
					token:this.$store.state.merchantToken,
					name:that.name,
					IDType:that.pickerSingleArray.value,
					IDNumber:that.IDNumber,
					companyName:that.companyName,
					businessLicense:newImgSrc
				},
				method:"GET",
				success(res) {
				  console.log(res)
				  if(res.data.status==true){
					  uni.showToast({
					  	title:res.data.msg,
						duration:1000
					  })
					  setTimeout(function(){
					  	uni.navigateBack({
					  	   delta:1
					  	})
					  },1000)
				  }else{
					  uni.showToast({
					 	title:res.data.msg,
					 	duration:1000,
						icon:"none"
					 }) 
				  }
				 
			      
				}
			 })
		 },
		 //选择证件
		 showSinglePicker() {
		 	this.pickerValueArray = this.pickerSingleArray
		 	this.mode = 'selector'
		 	this.deepLength = 1
		 	this.pickerValueDefault = [0]
		 	this.$refs.mpvuePicker.show()
			this.showPaperwork=false
		 },
		 onConfirm(e) {
		 	let paperworkDate= JSON.parse(JSON.stringify(e));
		 	this.paperworkText=paperworkDate.label;
		 },
		  //统计数据
		 statistical(){
		 	uni.request({
		 		url:this.$store.state.URL+"/user/user/mini_program_statistical_data",
		 		data:{
		 			token:this.$store.state.token,
		 			page_type:"complete_info"
		 		},
		 		success(res) {
		 			console.log(res);
		 		}
		 	})
		 }
		},
		onLoad() {
			this.statistical();
		}
	}
</script>

<style>
page{
	background: #F5F5F5;	
}
.ImproveMessage{
	width:100%;
	background:#fff;
	display: flex;
	justify-content: space-between;
	border:1upx solid #f2f1f1;
	padding:30upx 0;
}
.ImproveMessage view:nth-of-type(1){
	font-size:30upx;
	color:#333333;
	font-weight: 500;
	margin-left:30upx;
}
.ImproveMessage view:nth-of-type(2){
	text-align: right;
	margin-right: 30upx;
	font-size:28upx;
	color:#333333;
}
.placeholder{
	font-size:28upx;
	color:#999999;
}
.ImproveMessage view:nth-of-type(2) text{
	font-size:28upx;
	color:#999999;
	margin-right: 20upx;
}
.arrow_icon{
	 width:15upx;
	 height:36upx;
	 position: relative;
	 top:8upx;
}
.loadImg{
	background: #fff;
	margin-top:30upx;
	width:100%;
	height: auto;
	padding-top:10upx;
	padding-bottom: 30upx;
}
.loadImg text{
	font-size:30upx;
	color:#333333;
	font-weight: 500;
	margin-left:30upx;
	margin-bottom: 24upx;
	display: block;
}
.loadImg_button{
	width:150upx;
	height:162upx;
	border:1upx dashed #e0e0e0;
	margin-left:30upx;
	margin-top:60upx;
	margin-bottom: 60upx;
}
.loadImg_button view{
	text-align: center;
	margin-top:30%;
}
.loadImg_button image{
	width:55upx;
	height:50upx;
}
.loadImg_button text{
	font-size: 22upx;
	color: #999999;
	display: block;
	margin-left: -10upx;
}
.confirm_button{
	margin:30upx 30upx;
}
.confirm_button button{
	font-size:30upx;
	color:#fff;
	background: #e94d6a;
}
.deleteImg{
	width: 44upx;
	height: 44upx;
	position:absolute;
	top:-22upx;
	right:-22upx;
}
.AD{
 	  position: absolute;
 	  bottom: 0;
 	  left:50%;
 	  margin-left: -18%;
 	  margin-bottom:15upx ;
 }
 .AD text{
 	  font-size:20upx;
 	  color:#999;
 	  margin:0 10upx;
 }
</style>
